<template>
  <div class="container">
    <el-table :data="tableData">
      <el-table-column prop="classIndex" label="课次" width="50" />
      <el-table-column prop="timeRange" label="时段" width="130">
        <template #default="scope">
          <el-input
            v-model="scope.row.timeRange"
            placeholder="请输入时段"
            @blur="save(scope.row)"
          />
        </template>
      </el-table-column>
      <el-table-column prop="classHour" label="课时" width="120">
        <template #default="scope">
          <el-input
            v-model="scope.row.classHour"
            placeholder="请输入课时"
            @blur="save(scope.row)"
          />
        </template>
      </el-table-column>
      <el-table-column prop="curriculum" label="教学内容">
        <template #default="scope">
          <el-input
            v-model="scope.row.curriculum"
            placeholder="请输入教学内容"
            @blur="save(scope.row)"
          />
        </template>
      </el-table-column>
      <!-- <el-table-column prop="classHour" label="教学动态记事" width="150">
        <template #default="scope">
          <el-input v-model="scope.row.teachingNewsNotes" placeholder="请输入教学动态记事" />
        </template>
      </el-table-column> -->
      <el-table-column align="center" label="操作" width="150">
        <template #header>
          <el-button type="primary" icon="plus" circle @click="add" />
        </template>
        <template #default="scope">
          <el-button
            type="danger"
            icon="Delete"
            circle
            @click="tableDel(scope.$index, scope.row)"
          />
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script setup lang="ts">
let props = defineProps(["archivesId"]);
const { proxy } = getCurrentInstance();
let tableData = ref([]);
let loading = ref(false);

onMounted(() => {
  getInfo();
});

function add() {
  tableData.value.push({
    classIndex: tableData.value.length + 1,
    timeRange: "",
    classHour: "",
    curriculum: "",
  });
}

async function getInfo() {
  tableData.value = await proxy.$apis.scheduleRelevant({
    type: "archives-curriculum-journal-list",
    data: { archivesId: props.archivesId },
  });
}

async function tableDel(index, row) {
  if (row._id)
    await proxy.$apis.scheduleRelevant({
      type: "archives-curriculum-journal-del",
      data: { noteId: row._id },
    });
  tableData.value.splice(index, 1);
}

async function save(data) {
  data.archivesId = props.archivesId;
  await proxy.$apis.scheduleRelevant({
    type: "archives-curriculum-journal-save",
    data,
  });
  getInfo();
}
</script>

<style lang="scss" scoped>
.container {
  .actions {
    margin-top: 15px;
  }
}
</style>
